<script setup>
import { getUserProfile } from "@/api/user";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "@/stores";

const store = useStore();

const router = useRouter();
const userInfo = ref({});
const roleGroup = ref(null)

function Logout() {
  localStorage.removeItem("accessToken");
  sessionStorage.removeItem("accessToken");
  router.replace({
    path: "/login",
  });
}
function profile() {
  router.push({
    name: "settings-account-settings-tab",
    params: { tab: "profile" },
  });
}
function settings() {
  router.push({
    name: "settings-account-settings-tab",
    params: { tab: "tenant" },
    // path: "/settings/account-settings/tenant",
  });
}
getUserProfile()
  .then((res) => {
    userInfo.value = res.data.user;
    roleGroup.value = res.data.roleGroup;
    store.setUserInfo(res.data.user)
  })
  .catch((err) => {});
</script>

<template>
  <VBadge dot location="bottom right" offset-x="3" offset-y="3" bordered color="success">
    <VAvatar class="cursor-pointer" color="primary" variant="tonal">
      <VImg :src="userInfo.avatar" />

      <!-- SECTION Menu -->
      <VMenu activator="parent" width="230" location="bottom end" offset="14px">
        <VList>
          <!-- 👉 User Avatar & Name -->
          <VListItem>
            <template #prepend>
              <VListItemAction start>
                <VBadge dot location="bottom right" offset-x="3" offset-y="3" color="success">
                  <VAvatar color="primary" variant="tonal">
                    <VImg :src="userInfo.avatar" />
                  </VAvatar>
                </VBadge>
              </VListItemAction>
            </template>

            <VListItemTitle class="font-weight-semibold">
              {{ userInfo.userName }}
            </VListItemTitle>
            <VListItemSubtitle>{{roleGroup}}</VListItemSubtitle>
          </VListItem>

          <VDivider class="my-2" />

          <!-- 👉 Profile -->
          <VListItem link>
            <template #prepend>
              <VIcon class="me-2" icon="tabler-user" size="22" />
            </template>

            <VListItemTitle @click="profile">{{ $t('route.settings.profile') }}</VListItemTitle>
          </VListItem>

          <!-- 👉 Settings -->
          <VListItem link>
            <template #prepend>
              <VIcon class="me-2" icon="tabler-settings" size="22" />
            </template>

            <VListItemTitle @click="settings">{{ $t('route.basicSetting') }}</VListItemTitle>
          </VListItem>

          <!-- 👉 Pricing -->
          <!-- <VListItem link>
            <template #prepend>
              <VIcon class="me-2" icon="tabler-currency-dollar" size="22" />
            </template>

            <VListItemTitle>Pricing</VListItemTitle>
          </VListItem> -->

          <!-- 👉 FAQ -->
          <!-- <VListItem link>
            <template #prepend>
              <VIcon class="me-2" icon="tabler-help" size="22" />
            </template>

            <VListItemTitle>FAQ</VListItemTitle>
          </VListItem> -->

          <!-- Divider -->
          <VDivider class="my-2" />

          <!-- 👉 Logout -->
          <VListItem link>
            <template #prepend>
              <VIcon class="me-2" icon="tabler-logout" size="22" />
            </template>
            <VListItemTitle @click="Logout">{{ $t('common.logout') }}</VListItemTitle>
          </VListItem>
        </VList>
      </VMenu>
      <!-- !SECTION -->
    </VAvatar>
  </VBadge>
</template>
